<template>
  <view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view
      class="nav"
      :style="'height:' + height + 'rpx;background:' + backgroundColor"
    >
      <view class="nav-left" @click="clickLeft">
        <uni-icons
          type="back"
          :size="iconSize"
          :style="'color:' + centerColor"
        ></uni-icons>
      </view>
      <view class="nav-center" :style="'color:' + centerColor">
        {{ title }}
      </view>
      <view class="nav-right">
        <icon
          :class="['iconfont', iconClass]"
          :style="{ color: iconColor, fontSize: RightIconSize + 'rpx' }"
          @click="clickRight"
        >
        </icon>
        <text :style="'color:' + rightTextColor" @click="rightTextClick">{{
          rightText
        }}</text>
      </view>
    </view>
    <view style="height: 100rpx"></view>
  </view>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      default: 100,
    },
    backgroundColor: {
      type: String,
      default: "#fff",
    },
    leftIcon: {
      type: String,
      default: "left",
    },

    title: {
      type: String,
      default: "标题",
    },
    iconClass: {
      type: String,
      default: "",
    },
    iconColor: {
      type: String,
      default: "#3b95ff",
    },
    iconSize: {
      type: Number,
      default: 24,
    },
    RightIconSize: {
      type: Number,
      default: 36,
    },
    // 右侧温文本
    rightTextColor: {
      type: String,
      default: "",
    },
    rightText: {
      type: String,
      default: "",
    },
    centerColor: {
      type: String,
      default: "#000",
    },
    del: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    clickLeft() {
      console.log(this.del);
      if (this.del) {
        uni.removeStorage({
          key: "itemParams",
        });
      }
      uni.navigateBack({
        delta: 1,
      });
      this.$emit("clickLeftFn");
    },
    clickRight() {
      this.$emit("clickRightFn");
    },
    rightTextClick() {
      this.$emit("rightTextClick");
    },
  },
};
</script>

<style>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.nav {
  padding-top: 50rpx;
  width: 100%;
  position: fixed;
  top: 0;
	z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-left {
  margin-left: 10rpx;
}

.nav-center {
  font-size: 36rpx;
}

.nav-right {
  margin-right: 30rpx;
}
</style>